<template>
  <div class="w-100">
    <div class="tabs-content" v-if="!showResult">
      <!-- <el-steps :active="active" align-center>
        <el-step
          v-for="(item, index) in TabsList"
          :key="index"
          :title="item.label"
          description="" />
      </el-steps> -->
      <el-scrollbar max-height="80vh">
        <BaseInfo ref="formRef" v-if="active===1" @refresh="onRefresh"></BaseInfo>
      </el-scrollbar>
      <div class="fc">
        <template v-if="active===1">
          <el-button
            class="ap-btn"
            type="primary"
            @click="handleSubmit('submit')">
            保存
          </el-button>
        </template>
      </div>
    </div>
    <DataGather
      v-else
      :dataType="4"
      :gatherObj="gatherObj"
      @back="handleBack"
      @init="getInitMod"></DataGather>
  </div>
</template>

<script setup lang="ts">
import BaseInfo from './BaseInfo/index.vue'
import DataGather from '@/views/datacenter/components/DataGather/result.vue'

const emit = defineEmits(['refresh'])
const formRef = ref(null)
// 采集信息
const gatherObj: any = ref({})
const active: any = ref(1)
const showResult = ref(false)
const operateType = ref('')
const next = () => {
  if (active.value++ >= 2) active.value = 2
}

const TabsList = [
  {
    label: '基础信息',
    prop: 'dp_service_object'
  }
]
const getInitMod = () => {
  active.value = 1
  showResult.value = false
}
const onRefresh = (item) => {
  gatherObj.value = item || {}
  if (operateType.value == 'save-next') {
    next()
  } else {
    showResult.value = true
  }
}
const handleSubmit = (type) => {
  operateType.value = type
  formRef.value!.onSave()
}
const handleBack = () => {
  emit('refresh')
}
</script>

<style scoped lang="scss">
.active-item {
  padding: 1rem;
  margin: 1rem;
}
</style>
